<template>
  <div class="container">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-select
                v-model="filterField.projectName"
                filterable
                clearable
                remote
                reserve-keyword
                placeholder="请输入项目名称"
                :remote-method="remoteMethod"
                :loading="loading"
                @clear="clearOption"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="(item, i) in projectOptions"
                  :key="i"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
                :append-to-body="false"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.investment"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-form-item>
                        <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
                    </el-form-item> -->
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div class="mapBox">
        <div id="map" :class="advanced ? 'map' : 'mapStyle'"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import GeoUtils from '../../kits/GeoUtils.js'
export default {
  name: 'proDistribution',
  data() {
    return {
      titleText: '项目分布',
      advanced: false,
      titleExplain:
        '展示系统使用至今管辖范围内的所有监管部建档和企业申报并通过审核的项目清单，查看详情可全面掌握项目制度落实情况',
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        status: '', //开工状态  ；默认只显示已开工状态的项目2020/10/19 恩施
        industryId: '', //行业
        investment: '', //投资类型
        areaId: '', //区域
      },
      pageSize: 20,
      pageNo: 1,
      map: '',
      arr2: [],
      labelText: [],
      projectOptions: [],
      projectList: [],
      loading: false,
      areaNameParent: '',
      icon: require('../../../static/img/projectMap/mapDot.png'),
      childIcon: require('../../../static/img/projectMap/hoverMapDot.png'),
      parentAreaId: '',
      childCountyId: '',
      boundarys: {},
      areaId: [], //区域
      fixedChildCountyId: '', //marker点击存入id
      areaNameParentId: '',
      icon2: require('../../../static/img/projectMap/icon.png'),
      iconHighLight: require('../../../static/img/projectMap/iconHighLight.png'),
      iconSelect: require('../../../static/img/projectMap/iconSelect.png'),
      childLabelArr: [],
      flag: false,
      childMarkerArr: [],
      isChild: '0',
      oldChildLabelArr: [],
      oldChildMarkerArr: [],
    }
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'industryOptions',
      'areasOptions',
    ]),
  },
  created() {
    this.getInvestmenttype({})
    this.getStatus({})
    this.getIndustry({})
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
  },
  mounted() {
    this.initMap()
  },
  activated() {},
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getIndustry',
      'getAreas',
    ]),
    // 获取项目列表
    getProList(query) {
      this.axios({
        method: 'post',
        data: { projectName: query },
        url: 'api-p/projectstats/expand/projectnamelike',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectList = response.data.result
              if (query !== '') {
                this.loading = true
                setTimeout(() => {
                  this.loading = false
                  this.projectOptions = this.projectList.filter((item) => {
                    return item.toLowerCase().indexOf(query.toLowerCase()) > -1
                  })
                }, 200)
              } else {
                this.projectOptions = []
              }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    remoteMethod(query) {
      this.getProList(query)
    },
    // 搜索
    searchList() {
      this.childLabelArr = []
      this.childMarkerArr = []
      var allOverlay = this.map.getOverlays()
      for (var i = 0; i < allOverlay.length; i++) {
        allOverlay[i].enableMassClear()
      }
      if (this.areaId.length > 0) {
        var arrLabel = this.$refs['manageArea'].getCheckedNodes()[0].pathLabels
        var arrData = arrLabel[0] + arrLabel[1]
        this.showChildData(this.filterField.areaId)
        this.map.centerAndZoom(arrData, 11)
      } else if (this.filterField.projectName && this.areaId.length == 0) {
        var areaId
        if (this.$route.query.mark) {
          var obj = JSON.parse(this.$route.query.arrData)
          areaId = obj.cityId
          this.map.centerAndZoom(obj.cityName, 11)
        } else {
          areaId = this.parentAreaId
        }
        this.showChildData(areaId)
      } else {
        this.getParentData()
      }
    },
    inOrOutPolygon(center, arr) {
      return BMapLib.GeoUtils.isPointInPolygon(center, arr)
    },
    initMap() {
      this.map = new BMap.Map('map', { enableMapClick: false }) // 创建Map实例
      // var point = new BMap.Point(116.404, 39.915); // 创建点坐标
      this.map.enableScrollWheelZoom() // 启用滚轮放大缩小
      this.map.addControl(
        new BMap.NavigationControl({
          type: 'BMAP_NAVIGATION_CONTROL_LARGE',
        })
      )
      if (this.$route.query.mark && this.areaId.length == 0) {
        var obj = JSON.parse(this.$route.query.arrData)
        this.filterField.projectName = obj.projectName
        this.map.centerAndZoom(new BMap.Point(obj.lon, obj.lat), 11)
        setTimeout(() => {
          // this.showChildData(this.$route.query.cityId);
          var arr = [obj]
          this.showPoint(arr)
        }, 300)
      } else {
        this.getParentData()
      }
      this.map.addEventListener('dragend', this.dragendListener)
      var vm = this
      this.map.addEventListener('zoomend', function () {
        var zoom = this.getZoom()
        var center = this.getCenter()
        if (zoom >= 11) {
          if (zoom > 11) {
            for (var id in vm.boundarys) {
              if (vm.inOrOutPolygon(center, vm.boundarys[id])) {
                vm.childCountyId = id
                vm.areaId = [vm.areaNameParentId, id]
                vm.filterField.areaId = id
                break
              }
            }
          }
          if (vm.childCountyId != '' && vm.isChild == '0') {
            vm.showChildData(vm.childCountyId)
          }
        } else if (zoom <= 9) {
          vm.areaId = []
          vm.childCountyId = ''
          vm.childLabelArr = []
          vm.childMarkerArr = []
          var allOverlay = vm.map.getOverlays()
          for (var i = 0; i < allOverlay.length; i++) {
            allOverlay[i].enableMassClear()
          }
          vm.getParentData()
        }
      })
    },
    // 获取
    getParentData() {
      this.deleteDakaDian()
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/projectMap',
        data: this.filterField,
      })
        .then((res) => {
          if (res.data.result.result.length > 0) {
            this.areaNameParent = res.data.result.areaName
            this.areaNameParentId = res.data.result.areaId
            this.parentAreaId = res.data.result.areaId
            this.map.centerAndZoom(this.areaNameParent, 9)
            this.showPoint(res.data.result.result)
            this.isChild = '0'
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: '没有找到搜索的项目',
              type: 'warning',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    showPoint(arr, isClick) {
      // this.childLabelArr = [];
      // this.childMarkerArr = [];
      // map.clearOverlays();        //清除地图覆盖物
      if (arr[0].areaName == '珲合区') {
        arr[0].areaName = '珲春合作区'
      }

      for (var i = 0; i < arr.length; i++) {
        if (arr[i].lon || arr[i].lat) {
          this.showChildCoverPoint(arr[i], arr[i].lon, arr[i].lat)
        } else {
          if (isClick) {
            // 设置透明覆盖物
            this.MapBoundary(arr[i])
          } else {
            // 设置圆圈
            this.MapOverlay(arr[i])
            // 设置透明覆盖物
            this.MapBoundary(arr[i])
          }
        }
      }
    },
    MapBoundary(data) {
      if (data.countyId.length <= 4 || data.areaName == '市辖区') {
        return
      }
      var bdary = new BMap.Boundary()
      var that = this
      bdary.get(that.areaNameParent + data.areaName, function (rs) {
        //获取行政区域
        var count = rs.boundaries.length //行政区域的点有多少个
        if (count === 0) {
          return
        }
        var pointArray = []
        var pts = []
        for (var i = 0; i < count; i++) {
          var ply = new BMap.Polygon(rs.boundaries[i])
          // that.map.addOverlay(ply);  //添加覆盖物
          pointArray = pointArray.concat(ply.getPath())
        }
        pointArray.forEach((item) => {
          pts.push(new BMap.Point(item.lng, item.lat))
        })
        that.boundarys[data.countyId] = new BMap.Polygon(pts)
      })
    },
    // 地图覆盖点
    MapOverlay(data) {
      // if(data.areaName=="鄂州市"){
      //     return
      // }
      // var address = data.address;
      // var parentName;
      // parentName = address ? address : this.areaNameParent+data.areaName;
      var myGeo = new BMap.Geocoder()
      var that = this
      myGeo.getPoint(
        that.areaNameParent + data.areaName,
        function (point) {
          if (point) {
            var lng = point.lng
            var lat = point.lat
            that.showCoverPoint(data, lng, lat)
          }
        },
        that.areaNameParent
      )
    },
    showCoverPoint(data, lng, lat) {
      var p = new BMap.Point(lng, lat)
      var marker = new BMap.Marker(p, {
        icon: new BMap.Icon(this.icon, new BMap.Size(78, 78)),
      })
      if (data.areaName == '珲春合作区') {
        data.areaName = '珲合区'
      }
      marker.setTitle(data.areaName)
      // var marker = new BMap.Circle(p,8000,{strokeOpacity:0.1,strokeColor:"#fdc915",fillColor:"#fdc915",fillOpacity:1});
      marker.countyId = data.countyId
      marker.areaName = data.areaName
      marker.highLight = false
      var opts = {
        position: p, // 指定文本标注所在的地理位置
        offset: new BMap.Size(5, 15), //设置文本偏移量
      }
      var titleText =
        "<a title=  '" +
        data.areaName +
        '\' style = "color:#fff;">' +
        data.areaName +
        '<br/>' +
        data.count +
        '</a>'
      var label = new BMap.Label(titleText, opts) // 创建文本标注对象
      label.setStyle({
        color: '#fff',
        backgroundColor: 'transparent', //文本背景色
        borderColor: 'transparent', //文本框边框色
        padding: 0,
        margin: 0,
        fontSize: '10px',
        width: '60px',
        height: '80px',
        lineHeight: '20px',
        'text-align': 'center',
        overflow: 'hidden',
        'text-overflow': 'ellipsis',
        'white-space': 'nowrap',
      })
      // this.map.addOverlay(label);
      label.setZIndex(100000)
      marker.setLabel(label) //把label设置到maker上
      this.map.addOverlay(marker)
      this.addClickHandler(marker)
      marker.setZIndex(10000)
    },
    addClickHandler(marker) {
      if (marker.areaName == '珲合区') {
        marker.areaName = '珲春合作区'
      }
      marker.addEventListener('mouseover', (e) => {
        var myIcon = new BMap.Icon(this.childIcon, new BMap.Size(78, 78))
        marker.setIcon(myIcon)
        marker.setZIndex(10000)
      })
      marker.addEventListener('mouseout', (e) => {
        var myIcon = new BMap.Icon(this.icon, new BMap.Size(78, 78))
        marker.setIcon(myIcon)
        marker.setZIndex(10002)
      })
      marker.addEventListener('click', (e) => {
        this.childCountyId = e.target.countyId
        this.fixedChildCountyId = e.target.countyId
        this.filterField.areaId = e.target.countyId
        this.areaId = [this.areaNameParentId, e.target.countyId]
        if (this.map.getZoom() == 11) {
          this.showChildData(this.childCountyId)
        } else {
          this.map.centerAndZoom(this.areaNameParent + marker.areaName, 11)
        }
      })
    },
    dragendListener() {
      if (this.map.getZoom() >= 11) {
        this.deleteDakaDian()
        this.showChildData(this.childCountyId)
      }
    },
    deleteDakaDian() {
      this.map.clearOverlays()
    },
    showChildData(countyId) {
      var bs = this.map.getBounds() //获取可视区域
      var bssw = bs.getSouthWest() //可视区域左下角
      var bsne = bs.getNorthEast() //可视区域右上角
      this.childCountyId = countyId
      this.filterField.countyId = countyId
      this.filterField.areaId = countyId
      this.filterField.lon = bssw.lng
      this.filterField.lat = bssw.lat
      this.filterField.lonMax = bsne.lng
      this.filterField.latMax = bsne.lat
      this.deleteDakaDian()
      this.map.enableScrollWheelZoom()
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/projectMapDetails',
        data: this.filterField,
      })
        .then((res) => {
          if (!res.data.hasError) {
            if (res.data.result.length > 0) {
              this.fixedChildCountyId = ''
              this.isChild = '1'
              this.showPoint(res.data.result, 'isClick')
            } else {
              this.$message({
                showClose: true,
                duration: 3000,
                message: '没有找到搜索的项目',
                type: 'warning',
              })
            }
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    showChildCoverPoint(data, lng, lat) {
      var p = new BMap.Point(lng, lat)
      var icon
      icon = new BMap.Icon(this.icon2, new BMap.Size(13, 7))

      var iconMouseOver = new BMap.Icon(
        this.iconHighLight,
        new BMap.Size(13, 7)
      )
      var marker = new BMap.Marker(p, {
        icon: icon,
      })
      var opts = {
        position: p, // 指定文本标注所在的地理位置
        // offset   : new BMap.Size(-20, 10),    //设置文本偏移量
      }
      // var content =
      //     '<div style="position: absolute;left: 50%;transform: translateX(-50%);background:#009588">'+data.projectName+ '</div>';
      var labelInside = ''
      labelInside += '<span>' + data.projectName + '</span>'
      var labelLowLight = '<div class="cLabel">' + labelInside + '</div>'
      var labelLowLightOn =
        '<div class="cLabel labelOn">' + labelInside + '</div>'
      var label = new BMap.Label() // 创建文本标注对象
      var labelStyle = {
        color: '#fff',
        fontSize: '12px',
        // height : "30px",
        // lineHeight : "30px",
        background: 'none',
        border: 'none',
        padding: '0px 10px',
        cursor: 'pointer',
        // background:'#009588',
        // border: '1px solid #009588',
        '-ms-transform': 'translateX(-50%)',
        '-moz-transform': 'translateX(-50%)',
        '-webkit-transform': 'translateX(-50%)',
        '-o-transform': 'translateX(-50%)',
        transform: 'translateX(-50%)',
      }
      label.setOffset(new BMap.Size(7, -30))
      label.setStyle(labelStyle)
      label.projectName = data.projectName
      label.pbName = data.pbName
      label.pcName = data.pcName
      label.statusDesc = data.statusDesc
      label.startDate = data.startDate
      label.id = data.id
      marker.setLabel(label)
      this.map.addOverlay(marker)
      this.childLabelArr.push(label)
      this.childMarkerArr.push(marker)
      label.setContent(labelLowLight)
      // 地图放大缩小label的值缺失
      marker.disableMassClear()
      // marker.setTop(false);
      marker.setZIndex(100)
      var that = this
      label.addEventListener(
        'mouseover',
        function (e) {
          marker.setZIndex(19000005)
          marker.setTop(true)
          that.flag = true
          if (this.V.firstChild.className == 'cLabel') {
            this.V.firstChild.className = 'cLabel highLight'
            marker.setIcon(iconMouseOver)
          }
          marker.mouseover = true
        },
        false
      )
      // var iconSelect = new BMap.Icon(this.iconSelect, new BMap.Size(13,7))
      label.addEventListener(
        'mouseout',
        function (e) {
          that.flag = false
          if (this.V.firstChild.className == 'cLabel highLight') {
            this.V.firstChild.className = 'cLabel'
            marker.setIcon(icon)
            label.setContent(labelLowLight)
            marker.setZIndex(100)
            marker.setTop(false)
          }
          marker.mouseover = false
        },
        false
      )
      // 点击弹框显示详情
      this.showTkDetail(label, marker, labelLowLightOn, labelLowLight, lng, lat)
    },
    showTkDetail(label, marker, labelLowLightOn, labelLowLight, lng, lat) {
      var that = this
      label.addEventListener('click', function (e) {
        var arrLen = that.childLabelArr.length
        // for(var i = 0;i<arrLen;i++) {
        for (var i = that.childLabelArr.length - 1; i >= 0; i--) {
          that.childLabelArr[i].V.firstChild.className = 'cLabel'
          var icon = new BMap.Icon(that.icon2, new BMap.Size(13, 7))
          that.childMarkerArr[i].setIcon(icon)
          that.childMarkerArr[i].setZIndex(100)
          that.childMarkerArr[i].setTop(false)
        }
        if (that.flag) {
          this.V.firstChild.className = 'cLabel labelOn'
          var iconSelect = new BMap.Icon(that.iconSelect, new BMap.Size(13, 7))
          // this.setContent(labelLowLightOn);
          marker.setIcon(iconSelect)
          marker.setZIndex(19000002)
          marker.setTop(true)
        }

        marker.mouseover = false

        // 点击打开显示弹框
        that.openInfo(e, lng, lat)
      })
    },
    openInfo(e, lng, lat) {
      var data = e.target
      // 鼠标移入显示项目名称
      var opts = {
        width: 250, // 信息窗口宽度
        height: 0, // 信息窗口高度
        // title : "项目名称" , // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
        offset: { width: 1, height: -22 },
      }

      var p = e.point
      var point = new BMap.Point(lng, lat)
      var sContent =
        "<div class = 'info'>" +
        "<div style = 'padding-bottom: 10px;position:relative;' class = 'clearfix'>" +
        "<a  style = 'float:left; width: 66%;font-size: 16px; margin: 0;color:#333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;' title = '" +
        data.projectName +
        "'>" +
        data.projectName +
        '</a>' +
        "<p style = 'padding: 1px 5px;background: green;border-radius: 4px;font-size: 12px;float:left; margin: 0;color:#fff;margin-right:10px'  id='projectState'>" +
        data.statusDesc +
        '</p>' +
        '</div>' +
        '<div>' +
        '<div>' +
        "<p style = 'font-size: 12px; margin-bottom: 4px;display: inline-block;color:#333'>建设方：</p>" +
        "<span style='color:#333;font-size:12px'>" +
        data.pcName +
        '</span>' +
        '</div>' +
        '<div>' +
        "<p style = 'font-size: 12px; margin-bottom: 4px;display: inline-block;color:#333'>施工方：</p>" +
        "<span style = 'font-size:12px;color:#333'>" +
        data.pbName +
        '</span>' +
        '</div>' +
        '<div>' +
        "<p style = 'font-size: 12px; margin-bottom: 4px;display: inline-block;color:#333'>开工日期：</p>" +
        "<span style='color:#333;font-size:12px'>" +
        data.startDate +
        '</span>' +
        '</div>' +
        '</div>' +
        "<p style = 'text-align:center'>" +
        "<button style= 'border-radius: 4px;border: 0;color:#409EFF;font-size:12px;outline:0;text-align:center;margin-top:4px;background:none;cursor:pointer' id = 'btn' value = '" +
        data.id +
        "'>查看详情>></button>" +
        '</p>'
      ;('</div>')
      var infoWindow = new BMap.InfoWindow(sContent, opts) // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point) //开启
      // 隐藏信息窗口的关闭按钮
      /*infoWindow.addEventListener('open',function(type, target, point){ //窗口打开是，隐藏自带的关闭按钮
                $('.BMap_pop>img').hide();
            })*/
      setTimeout(function () {
        if (projectState == '未开工') {
          document.getElementById('projectState').style.backgroundColor =
            '#ffc100'
        } else if (projectState == '已开工') {
          document.getElementById('projectState').style.backgroundColor =
            '#2ebbe8'
        } else if (projectState == '已竣工') {
          document.getElementById('projectState').style.backgroundColor =
            '#657282'
        } else if (projectState == '已停工') {
          document.getElementById('projectState').style.backgroundColor =
            '#d9544f'
        }
      }, 500)
      var that = this
      // 点击信息框中的查看详情跳转详细页面
      setTimeout(function () {
        var btnSeeDetail = document.getElementById('btn')
        var projectId = btnSeeDetail.value
        btnSeeDetail.onclick = function () {
          that.$router.push({
            path: '/home/monitorProjectManagement/projectDetail',
            name: 'projectDetail',
            query: {
              projectId: projectId,
            },
          })
          that.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/projectList',
            newUrl: that.$router.currentRoute.fullPath,
          })
        }
      }, 1000)
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    clearOption() {
      this.projectOptions = []
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
}
.mainCon {
  height: 100%;
}
.mapBox {
  padding: 24px;
  height: 100%;
}
.map {
  width: 100%;
  height: 100%;
}
.mapStyle {
  width: 100%;
  height: 100%;
}
.searchInputWidth {
  margin: 0 !important;
}
#map /deep/ .BMapLabel .cLabel {
  background: #009588 !important;
  border: 1px solid #009588 !important;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}
#map /deep/ .BMapLabel .highLight {
  background: #4db5ab !important;
  border: 1px solid #4db5ab !important;
}
#map /deep/ .BMapLabel .labelOn {
  background: #ec8424 !important;
  border: 1px solid #ec8424 !important;
}
@media only screen and (max-width: 1366px) {
  /deep/.searchInputWidth .el-form--inline .el-form-item__label {
    width: 80px;
  }
}
/deep/ .BMap_pop div {
  border: 0 !important;
}
/deep/ .BMap_pop div:nth-of-type(7) {
  width: 23px !important;
  border-bottom-right-radius: 10px;
}
/deep/ .BMap_pop div:nth-of-type(1) {
  border-top-left-radius: 10px;
}
/deep/ .BMap_pop div:nth-of-type(3) {
  border-top-right-radius: 10px;
}
/deep/ .BMap_pop div:nth-of-type(5) {
  border-bottom-left-radius: 10px;
}
/deep/ .BMap_bubble_content {
  color: #003399;
}
@import '../../../static/css/filterArea.less';
</style>
